<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Course Release</title>
    <link rel="stylesheet" href="courseManager.css">
</head>
<body>
    <div class="container">
        <h1>Publish new courses</h1>
        <form id="coursePublishForm">

            <div class="form-group">
                <label for="coursewareFile">Upload courseware:</label>
                <input type="file" id="coursewareFile" multiple onchange="displaySelectedFiles()">
                <ul id="selectedFiles"></ul>
                <button type="button" onclick="saveCourseware()">Save courseware</button>
                <h2>Saved courseware</h2>
                <ul id="savedCoursewares"></ul>
            </div>

            <div class="form-group">
                <label for="courseTitle">Course Title:</label>
                <input type="text" id="courseTitle" name="courseTitle" required>
            </div>
            <div class="form-group">
                <label for="courseDescription">Course Description:</label>
                <textarea id="courseDescription" name="courseDescription" required></textarea>
            </div>
            <div class="form-group">
                <label for="courseCategory">Course Category:</label>
                <select id="courseCategory" name="courseCategory" required>
                    <option value="Science and Engineering">Science and Engineering</option>
                    <option value="computer">computer</option>
                    <option value="Education and Language">Education and Language</option>
                    <!-- 其他课程类别 -->
                    <option value="Literature and Art">Literature and Art</option>
                    <!-- <option value="Entrepreneurship and Workplace">Entrepreneurship and Workplace</option>
                    <option value="Philosophy, History, and Culture">Philosophy, History, and Culture</option>
                    <option value="Economy and Management">Economy and Management</option>
                    <option value="medicine">medicine</option> -->
                </select>
            </div>
            <div class="form-group">
                <label for="courseIntro">Course Introduction:</label>
                <textarea id="courseIntro" name="courseIntro" required></textarea>
            </div>
            <div class="form-group">
                <label>Candidate homepage carousel image:</label>
                <div id="carouselContainer" class="carousel-container"></div>
                <input type="file" id="carouselImageInput" accept="image/*" multiple>
                <button type="button" onclick="addCarouselImages()">Add Picture</button>
            </div>
            <div class="form-group">
                <label for="enableComments">Open the course comment section:</label>
                <input type="checkbox" id="enableComments" name="enableComments">
            </div>

            <div class="form-group">
                <label for="enableNotes">Open the course notes area:</label>
                <input type="checkbox" id="enableNotes" name="enableNotes">
            </div>

            <div class="form-group">
                <label for="assignmentTitle">Assignment Name:</label>
                <input type="text" id="assignmentTitle" name="assignmentTitle">
                <label for="newAssignment">Homework requirements:</label>
                <textarea id="newAssignment" name="newAssignment"></textarea>
                <label for="assignmentDeadline">closing date:</label>
                <input type="datetime-local" id="assignmentDeadline" name="assignmentDeadline">
                <button type="button" onclick="addAssignment()">Add homework</button>
            </div>
            <div id="assignmentsContainer"></div>

            <button type="button" onclick="previewCourse()">Preview Course</button>
            <button type="button" onclick="publishCourse()">Publish courses</button>
            
        </form>
        <h2>Published courses</h2>
        <ul id="publishedCourses"></ul>
    </div>
    
    <script src="courseManager.js"></script>
    <script src="../database.js"></script>
</body>
</html>